<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { usePopWinInject, usePopWinProvide } from '../../../../common/hooks/FormHooks'
import { createOrderApi, updateOrderApi } from '../../../../common/service/api/orderApi'

// 当前状态
const state:any = reactive({
    isLoading: false,
    formData: {
        id: 0,
        memberName: '',
        productName: '',
        number: 0,
        orderPayTime: '',
        orderStatus: '',
        price: 0,
        unit: ''
    },

    rules: {
        memberName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        productName: [{ required: true, message: '请输入分类名', trigger: 'blur' }]
    }


})

// 表单工具方法
const { formRef, actions, rootPopState } = usePopWinInject(state, {
    createMethod: createOrderApi,
    updateMethod: updateOrderApi
})

const submitHandler = () => {
    actions.submitHandler()
}

// 初始化
onMounted(() => {
  // 初始化表单
  actions.initFormData(false)
})

</script>

<template>
  <v-pop-win :title="rootPopState.isPopCreate?'添加订单数据':'编辑订单数据'"
             :width="500"
             :loading="state.isLoading"
             align-center
             @close="()=>actions.close()"
             @submit="submitHandler">
    <el-form ref="formRef"
             :style="{width:'100%'}"
             :model="state.formData"
             :rules="state.rules"
             :label-width="100"
             class="form-edit-box"
             status-icon>
      <el-form-item label="买家名称" prop="memberName">
        <el-input v-model.trim="state.formData.memberName"
                  :style="{width:'100%'}"
                  placeholder="请输入买家名称"
                  maxlength="100" />
      </el-form-item>

      <el-form-item label="商品标题" prop="productName">
        <el-input v-model.trim="state.formData.productName"
                  type="textarea"
                  :rows="2"
                  :style="{width:'100%'}"
                  placeholder="请输入商品标题"
                  maxlength="500" />
      </el-form-item>

      <el-form-item label="商品价格" prop="price">
        <el-input-number v-model.trim="state.formData.price"
                         :style="{width:'100%'}"
                         placeholder="请输入商品价格" />
      </el-form-item>

      <el-form-item label="订单数量" prop="number">
        <el-input-number v-model="state.formData.number"
                         :style="{width:'100%'}"
                         placeholder="请输入订单数量" />
      </el-form-item>

      <el-form-item label="订单单位" prop="unit">
        <el-input v-model.trim="state.formData.unit"
                  :style="{width:'100%'}"
                  placeholder="请输入订单单位"
                  maxlength="100" />
      </el-form-item>

      <el-form-item label="订单时间" prop="orderPayTime">
        <el-date-picker v-model="state.formData.orderPayTime"
                        type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        :style="{width:'100%'}"
                        placeholder="请输入订单时间" />
      </el-form-item>

      <el-form-item label="订单状态" prop="orderStatus">
        <el-input v-model.trim="state.formData.orderStatus"
                  :style="{width:'100%'}"
                  placeholder="请输入订单状态"
                  maxlength="200" />
      </el-form-item>
    </el-form>
  </v-pop-win>
</template>


<style scoped lang="scss">

</style>
